import React from "react";
import {Button as AntdButton, Steps as AntdSteps} from 'antd';
import {renderIcon, VJsonComponent, VJsonComponentBase,renderItems} from "../factory";
import {NamePath} from "rc-field-form/lib/interface";
import _ from 'lodash'
import {YvanEvent} from "../types";
import {apply, isPromise, YvanEventBind, YvanEventDispatch} from "../utils/helper";
import * as Extend from '../extend'
import {toJS} from "mobx";
const { Step } = AntdSteps;
export interface StepsVJsonProp {
    current: number;
}

export interface StepsState {

}

@VJsonComponent({
    view: 'steps'
})
export default class Steps extends VJsonComponentBase<StepsVJsonProp, StepsState> {
    static defaultProps = {
        current:0
    }

    constructor(props: any) {
        super(props);

        _.defaults(
            this.props.vjson,
            Steps.defaultProps
        )
    }

    next = () => {
        this.props.vjson.current=this.props.vjson.current+1;
    }
    prev = () => {
        this.props.vjson.current=this.props.vjson.current-1;
    }

    render() {
        // @ts-ignore
        return (
            <>
            <AntdSteps current={this.props.vjson.current}>
                {this.props.vjson.items.map(item => (
                    <Step key={item.title} title={item.title} />
                ))}
            </AntdSteps>
            <div className="steps-content" style={{padding:'10px 0'}}>
                {renderItems(this, this.props.vjson.items[this.props.vjson.current].items)}
            </div>
            <div className="steps-action">
                {this.props.vjson.current < this.props.vjson.items.length - 1 && (
                    <AntdButton type="primary" onClick={() => this.next()}>
                        下一步
                    </AntdButton>
                )}
                {this.props.vjson.current === this.props.vjson.items.length - 1 && (
                    <AntdButton type="primary" onClick={() =>{}}>
                        结束
                    </AntdButton>
                )}
                {this.props.vjson.current > 0 && (
                    <AntdButton style={{ margin: '0 8px' }} onClick={() => this.prev()}>
                        上一步
                    </AntdButton>
                )}
            </div>
            </>
        )
    }
}
